<template>
  <div class="home">
    <div class="nav">
      <div class="nav-left">
        <h1 class="system-title clickable" @click="backToHome">短期电力负荷AI预测分析系统</h1>
      </div>
      <div class="nav-right">
        <div class="settings-button" @click="showLogoutModal = true">
          <Icon type="ios-settings" size="20" />
          <span>设置</span>
        </div>
      </div>
    </div>
    
    <!-- 主内容区域 - 卡片式布局 -->
    <div class="main-content">
      <div class="dashboard-container">
        <h2 class="dashboard-title">系统功能概览</h2>
        <div class="cards-grid">
          <!-- 预测总览卡片 -->
          <div class="card" @click="navigateToModule('prediction-overview')">
            <div class="card-icon">
              <Icon type="ios-analytics" size="32" />
            </div>
            <div class="card-content">
              <h3>预测总览</h3>
              <p>AI智能负荷预测中心，支持多模型分析、实时指标展示和智能洞察</p>
            </div>
            <div class="card-arrow">
              <Icon type="ios-arrow-forward" size="16" />
            </div>
          </div>

          <!-- 模型评估卡片 -->
          <div class="card" @click="navigateToModule('model-evaluation')">
            <div class="card-icon">
              <Icon type="ios-stats" size="32" />
            </div>
            <div class="card-content">
              <h3>模型评估</h3>
              <p>多模型性能对比分析，精度指标评估，运行效率对比</p>
            </div>
            <div class="card-arrow">
              <Icon type="ios-arrow-forward" size="16" />
            </div>
          </div>

          <!-- 气象影响卡片 -->
          <div class="card" @click="navigateToModule('weather-impact')">
            <div class="card-icon">
              <Icon type="ios-cloud" size="32" />
            </div>
            <div class="card-content">
              <h3>气象影响</h3>
              <p>分析气象因素对电力负荷的影响，温度、湿度等关键指标</p>
            </div>
            <div class="card-arrow">
              <Icon type="ios-arrow-forward" size="16" />
            </div>
          </div>

          <!-- 时段分析卡片 -->
          <div class="card" @click="navigateToModule('usage-patterns')">
            <div class="card-icon">
              <Icon type="ios-pulse" size="32" />
            </div>
            <div class="card-content">
              <h3>时段分析</h3>
              <p>分析不同时段的用电模式，识别负荷峰值和谷值规律</p>
            </div>
            <div class="card-arrow">
              <Icon type="ios-arrow-forward" size="16" />
            </div>
          </div>

          <!-- 历史查询卡片 -->
          <div class="card" @click="navigateToModule('historical-query')">
            <div class="card-icon">
              <Icon type="ios-search" size="32" />
            </div>
            <div class="card-content">
              <h3>历史查询</h3>
              <p>查询历史电力负荷数据，支持多维度数据筛选和导出</p>
            </div>
            <div class="card-arrow">
              <Icon type="ios-arrow-forward" size="16" />
            </div>
          </div>

          <!-- 模型训练卡片 -->
          <div class="card" @click="navigateToModule('model-training')">
            <div class="card-icon">
              <Icon type="ios-cog" size="32" />
            </div>
            <div class="card-content">
              <h3>模型训练</h3>
              <p>手动模型训练，更新LightGBM、XGBoost、MLP及混合模型</p>
            </div>
            <div class="card-arrow">
              <Icon type="ios-arrow-forward" size="16" />
            </div>
          </div>
        </div>

        <!-- 系统状态信息 -->
        <div class="system-status">
          <div class="status-card">
            <h4>数据同步状态</h4>
            <div class="status-content">
              <div class="status-item">
                <span class="status-label">负荷数据状态：</span>
                <span class="status-value" :class="{ 'status-success': dataStatus.powerload }">
                  {{ dataStatus.powerload ? '已同步' : '未同步' }}
                </span>
              </div>
              <div class="status-item">
                <span class="status-label">气象数据状态：</span>
                <span class="status-value" :class="{ 'status-success': dataStatus.weather }">
                  {{ dataStatus.weather ? '已同步' : '未同步' }}
                </span>
              </div>
              <div class="status-item">
                <span class="status-label">后端连接：</span>
                <span class="status-value" :class="{ 'status-success': backendStatus.connected }">
                  {{ backendStatus.connected ? '已连接' : '未连接' }}
                </span>
              </div>
              <div class="data-sources">
                <div class="source-item">
                  <span class="source-label">负荷数据来源：</span>
                  <span class="source-value">ENTSO-E API</span>
                </div>
                <div class="source-item">
                  <span class="source-label">气象数据来源：</span>
                  <span class="source-value">Visual Crossing API</span>
                </div>
                <div class="source-item">
                  <span class="source-label">上次更新：</span>
                  <span class="source-value">{{ lastUpdateTime || '未知' }}</span>
                </div>
                <div class="source-item">
                  <span class="source-label">地点：</span>
                  <span class="source-value">比利时</span>
                </div>
              </div>
            </div>
            <div class="sync-buttons">
              <button class="sync-btn primary" @click="syncAllData" :disabled="isSyncing">
                <Icon type="ios-refresh" size="14" />
                {{ isSyncing ? '同步中...' : '一键更新数据' }}
              </button>
              <button class="sync-btn" @click="checkBackendConnection">
                <Icon type="ios-settings" size="14" />
                检查连接
              </button>
            </div>
          </div>

          <div class="status-card dataset-overview-card">
            <h4>数据概览</h4>
            <div class="status-content">
              <div class="dataset-stats">
                <div class="stat-group">
                  <h5>负荷数据</h5>
                  <div class="stat-item">
                    <span class="stat-label">记录数：</span>
                    <span class="stat-value">{{ datasetOverview.load_data?.total_records || 0 }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">时间跨度：</span>
                    <span class="stat-value">{{ datasetOverview.load_data?.time_span_days || 0 }}天</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">起始时间：</span>
                    <span class="stat-value">{{ datasetOverview.load_data?.start_date || '无数据' }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">结束时间：</span>
                    <span class="stat-value">{{ datasetOverview.load_data?.end_date || '无数据' }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">平均负荷：</span>
                    <span class="stat-value">{{ datasetOverview.load_data?.avg_load || 0 }}MW</span>
                  </div>
                </div>
                <div class="stat-group">
                  <h5>气象数据</h5>
                  <div class="stat-item">
                    <span class="stat-label">记录数：</span>
                    <span class="stat-value">{{ datasetOverview.weather_data?.total_records || 0 }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">时间跨度：</span>
                    <span class="stat-value">{{ datasetOverview.weather_data?.time_span_days || 0 }}天</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">起始时间：</span>
                    <span class="stat-value">{{ datasetOverview.weather_data?.start_date || '无数据' }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">结束时间：</span>
                    <span class="stat-value">{{ datasetOverview.weather_data?.end_date || '无数据' }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">平均温度：</span>
                    <span class="stat-value">{{ datasetOverview.weather_data?.avg_temperature || 0 }}°C</span>
                  </div>
                </div>
              </div>
              <div class="chart-container" ref="datasetChart" style="height: 200px; margin-top: 15px;"></div>
            </div>
            <div class="sync-buttons">
              <button class="sync-btn" @click="refreshDatasetOverview">
                <Icon type="ios-refresh" size="14" />
                刷新数据
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 注销确认模态框 -->
    <div v-if="showLogoutModal" class="modal-overlay" @click="showLogoutModal = false">
      <div class="modal-content" @click.stop>
        <h3>确认注销</h3>
        <p>您确定要注销登录吗？</p>
        <div class="modal-buttons">
          <button @click="showLogoutModal = false" class="cancel-btn">取消</button>
          <button @click="logout" class="confirm-btn">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      showLogoutModal: false,
      dataStatus: {
        powerload: false,
        weather: false
      },
      datasetOverview: {
        load_data: {},
        weather_data: {},
        trends: {},
        data_quality: {}
      },
      chart: null,
      backendStatus: {
        connected: false
      },
      isSyncing: false,
      lastUpdateTime: null
    }
  },
  mounted() {
    // 检查是否有token，如果没有跳转到登录页
    const token = localStorage.getItem('access_token')
    if (!token) {
      this.$router.push('/login')
    }
    
    // 获取系统状态
    this.getSystemStatus()
    // 获取数据集概览
    this.getDatasetOverview()
    // 静默检查后端连接状态
    this.checkBackendConnectionSilent()
    // 初始化图表
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    navigateToModule(moduleName) {
      // 特殊处理：预测总览跳转到新版界面
      let targetPath = `/${moduleName}`
      if (moduleName === 'prediction-overview') {
        targetPath = '/new-prediction-overview'
      }
      
      // 检查是否已经在目标路由，避免冗余导航
      if (this.$route.path === targetPath) {
        console.log(`已在目标页面 ${targetPath}，跳过导航`)
        return
      }
      
      // 使用try-catch捕获可能的导航错误
      this.$router.push(targetPath).catch(err => {
        // 忽略导航到相同路由的错误
        if (err.name !== 'NavigationDuplicated') {
          console.error('导航错误:', err)
        }
      })
    },
    backToHome() {
      const targetPath = '/dashboard'
      
      // 检查是否已经在仪表板页面
      if (this.$route.path === targetPath) {
        return
      }
      
      this.$router.push(targetPath).catch(err => {
        if (err.name !== 'NavigationDuplicated') {
          console.error('返回首页导航错误:', err)
        }
      })
    },
    async syncPowerloadData() {
      try {
        this.$Message.loading('正在同步电力负荷数据...', 0)
        const response = await this.$api.dataSyncAPI.syncPowerloadData()
        this.$Message.destroy()
        if (response.status === 'ok') {
          this.$Message.success(response.message || '电力负荷数据同步成功')
          this.dataStatus.powerload = true
        } else {
          this.$Message.warning(response.message || '电力负荷数据同步失败')
        }
      } catch (error) {
        this.$Message.destroy()
        this.$Message.error('电力负荷数据同步失败')
        console.error('同步电力负荷数据失败:', error)
      }
    },
    async syncWeatherData() {
      try {
        this.$Message.loading('正在同步气象数据...', 0)
        const response = await this.$api.dataSyncAPI.syncWeatherData()
        this.$Message.destroy()
        if (response.status === 'ok') {
          this.$Message.success(response.message || '气象数据同步成功')
          this.dataStatus.weather = true
        } else {
          this.$Message.warning(response.message || '气象数据同步失败')
        }
      } catch (error) {
        this.$Message.destroy()
        this.$Message.error('气象数据同步失败')
        console.error('同步气象数据失败:', error)
      }
    },
    async getSystemStatus() {
      try {
        // 获取数据集概览，其中包含基于前一天数据的状态判断
        const overviewResponse = await this.$api.datasetAPI.getOverview()
        if (overviewResponse.success && overviewResponse.data.data_quality) {
          const dataQuality = overviewResponse.data.data_quality
          // 使用新的状态判断逻辑：基于前一天的数据
          this.dataStatus.powerload = dataQuality.load_data_status === 'complete'
          this.dataStatus.weather = dataQuality.weather_data_status === 'complete'
          this.lastUpdateTime = dataQuality.last_updated
        }
      } catch (error) {
        console.error('获取系统状态失败:', error)
        // 使用默认状态
        this.dataStatus = { powerload: false, weather: false }
      }
    },
    async getDatasetOverview() {
      try {
        const response = await this.$api.datasetAPI.getOverview()
        console.log('🔍 数据集概览响应:', response)
        
        if (response.success) {
          this.datasetOverview = response.data
          
          // 同时更新数据状态和上次更新时间
          if (response.data.data_quality) {
            const dataQuality = response.data.data_quality
            this.dataStatus.powerload = dataQuality.load_data_status === 'complete'
            this.dataStatus.weather = dataQuality.weather_data_status === 'complete'
            this.lastUpdateTime = dataQuality.last_updated
          }
          
          // 更新图表
          this.$nextTick(() => {
            this.updateChart()
          })
        }
      } catch (error) {
        console.error('获取数据集概览失败:', error)
      }
    },
    async refreshDatasetOverview() {
      await this.getDatasetOverview()
      this.$Message.success('数据集概览已刷新')
    },
    initChart() {
      if (this.$refs.datasetChart) {
        this.chart = this.$echarts(this.$refs.datasetChart)
        this.updateChart()
      }
    },
    updateChart() {
      if (!this.chart || !this.datasetOverview.trends) return
      
      const loadTrend = this.datasetOverview.trends.load_trend || []
      const temperatureTrend = this.datasetOverview.trends.temperature_trend || []
      
      const option = {
        backgroundColor: 'transparent',
        grid: {
          left: '10%',
          right: '10%',
          top: '15%',
          bottom: '20%'
        },
        xAxis: {
          type: 'category',
          data: loadTrend.map(item => item.date.slice(-5)), // 只显示月-日
          axisLine: { lineStyle: { color: '#75deef' } },
          axisLabel: { color: '#999', fontSize: 10 }
        },
        yAxis: [
          {
            type: 'value',
            name: '负荷(MW)',
            nameTextStyle: { color: '#75deef', fontSize: 10 },
            axisLine: { lineStyle: { color: '#75deef' } },
            axisLabel: { color: '#999', fontSize: 10 },
            splitLine: { lineStyle: { color: '#1a3c58' } }
          },
          {
            type: 'value',
            name: '温度(°C)',
            nameTextStyle: { color: '#4ecdc4', fontSize: 10 },
            axisLine: { lineStyle: { color: '#4ecdc4' } },
            axisLabel: { color: '#999', fontSize: 10 }
          }
        ],
        series: [
          {
            name: '负荷',
            type: 'line',
            yAxisIndex: 0,
            data: loadTrend.map(item => item.value),
            lineStyle: { color: '#75deef', width: 2 },
            itemStyle: { color: '#75deef' },
            areaStyle: { color: 'rgba(117, 222, 239, 0.1)' },
            smooth: true
          },
          {
            name: '温度',
            type: 'line',
            yAxisIndex: 1,
            data: temperatureTrend.map(item => item.value),
            lineStyle: { color: '#4ecdc4', width: 2 },
            itemStyle: { color: '#4ecdc4' },
            smooth: true
          }
        ],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(7, 19, 50, 0.9)',
          borderColor: '#75deef',
          textStyle: { color: '#fff' }
        },
        legend: {
          data: ['负荷', '温度'],
          textStyle: { color: '#999', fontSize: 10 },
          top: '5%'
        }
      }
      
      this.chart.setOption(option)
    },
    async syncAllData() {
      if (this.isSyncing) return;
      this.isSyncing = true;
      
      try {
        this.$Message.loading('正在检查数据状态...', 0);
        
        // 首先检查后端连接
        await this.checkBackendConnectionSilent();
        
        // 使用一键更新API
        this.$Message.loading('正在同步数据...', 0);
        const response = await this.$api.dataSyncAPI.syncAllData();
        
        this.$Message.destroy();
        
        if (response.status === 'ok') {
          if (response.skipped) {
            this.$Message.info(response.message || '数据已是最新状态');
          } else {
            this.$Message.success(response.message || '数据同步成功');
          }
          // 不再在这里手动设置状态，而是通过刷新数据来更新
        } else {
          this.$Message.warning(response.message || '数据同步失败');
        }
        
        // 刷新数据概览（这将同时更新系统状态和图表）
        await this.getDatasetOverview();
        
      } catch (error) {
        this.$Message.destroy();
        this.$Message.error('数据同步失败: ' + (error.message || '未知错误'));
        console.error('数据同步失败:', error);
      } finally {
        this.isSyncing = false;
      }
    },
    async checkBackendConnection() {
      try {
        this.$Message.loading('正在检查后端连接...', 0);
        const response = await this.$api.backendAPI.checkConnection();
        this.$Message.destroy();
        
        if (response.success || response.status === 'ok') {
          this.$Message.success('后端连接正常！');
          this.backendStatus.connected = true;
        } else {
          this.$Message.error('后端连接异常！');
          this.backendStatus.connected = false;
        }
      } catch (error) {
        this.$Message.destroy();
        this.$Message.error('后端连接失败: ' + (error.message || '无法连接到服务器'));
        console.error('检查后端连接失败:', error);
        this.backendStatus.connected = false;
      }
    },
    async checkBackendConnectionSilent() {
      try {
        const response = await this.$api.backendAPI.checkConnection();
        if (response.success || response.status === 'ok') {
          this.backendStatus.connected = true;
        } else {
          this.backendStatus.connected = false;
        }
      } catch (error) {
        console.error('静默检查后端连接失败:', error);
        this.backendStatus.connected = false;
      }
    },
    logout() {
      // 清除登录状态
      localStorage.removeItem('access_token')
      localStorage.removeItem('refresh_token')
      localStorage.removeItem('user_info')
      
      // 跳转到登录页面
      this.$router.push('/login').catch(err => {
        if (err.name !== 'NavigationDuplicated') {
          console.error('注销跳转错误:', err)
        }
      })
      
      // 显示成功消息
      this.$Message.success('注销成功')
      
      // 关闭模态框
      this.showLogoutModal = false
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #0c1426 0%, #1a2332 50%, #0f1b2a 100%);
  position: relative;
  overflow: hidden;
  
  // 电流背景效果
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      linear-gradient(90deg, rgba(117, 222, 239, 0.1) 1px, transparent 1px),
      linear-gradient(180deg, rgba(117, 222, 239, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: electric-grid 3s linear infinite;
    z-index: 1;
  }
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(117, 222, 239, 0.1) 1px, transparent 1px),
                radial-gradient(circle at 40% 20%, rgba(78, 205, 196, 0.1) 1px, transparent 1px),
                radial-gradient(circle at 90% 40%, rgba(255, 107, 107, 0.1) 1px, transparent 1px),
                radial-gradient(circle at 70% 80%, rgba(117, 222, 239, 0.1) 1px, transparent 1px);
    background-size: 100px 100px, 150px 150px, 120px 120px, 80px 80px;
    animation: electric-pulse 4s ease-in-out infinite alternate;
    z-index: 1;
  }
  
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: rgba(7, 19, 50, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #1a3c58;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    z-index: 1000;
    
    .nav-left {
      display: flex;
      align-items: center;
      flex: 1;
      
      .system-title {
        font-size: 28px;
        font-weight: bold;
        background: linear-gradient(45deg, #75deef, #4ecdc4, #ff6b6b);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0;
        text-shadow: 0 0 20px rgba(117, 222, 239, 0.5);
        cursor: pointer;
        transition: all 0.3s ease;
        user-select: none;
        
        &:hover {
          transform: scale(1.05);
          text-shadow: 0 0 30px rgba(117, 222, 239, 0.8);
        }
        
        &:active {
          transform: scale(0.98);
        }
      }
    }
    
    .nav-right {
      display: flex;
      align-items: center;
      
      .settings-button {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        background: rgba(117, 222, 239, 0.1);
        border: 1px solid #75deef;
        border-radius: 25px;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          background: rgba(117, 222, 239, 0.2);
          box-shadow: 0 0 15px rgba(117, 222, 239, 0.3);
        }
        
        :deep(.ivu-icon) {
          color: #75deef;
          margin-right: 8px;
        }
        
        span {
          color: #75deef;
          font-size: 14px;
        }
      }
    }
  }
  
  .main-content {
    margin-top: 80px;
    height: calc(100vh - 80px);
    overflow-y: auto;
    padding: 30px;
    position: relative;
    z-index: 10;
    
    .dashboard-container {
      max-width: 1400px;
      margin: 0 auto;
      
      .dashboard-title {
        color: #75deef;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 40px;
        text-shadow: 0 0 20px rgba(117, 222, 239, 0.5);
      }
      
      .cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 30px;
        margin-bottom: 50px;
        
        .card {
          background: rgba(7, 19, 50, 0.8);
          border: 1px solid #1a3c58;
          border-radius: 16px;
          padding: 30px;
          cursor: pointer;
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;
          
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #75deef, #4ecdc4, #ff6b6b);
            transform: scaleX(0);
            transition: transform 0.3s ease;
          }
          
          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(117, 222, 239, 0.2);
            border-color: #75deef;
            
            &::before {
              transform: scaleX(1);
            }
            
            .card-arrow {
              transform: translateX(5px);
            }
          }
          
          .card-icon {
            margin-bottom: 20px;
            
            :deep(.ivu-icon) {
              color: #75deef;
            }
          }
          
          .card-content {
            h3 {
              color: #75deef;
              font-size: 20px;
              font-weight: bold;
              margin-bottom: 10px;
            }
            
            p {
              color: #999;
              font-size: 14px;
              line-height: 1.6;
              margin: 0;
            }
          }
          
          .card-arrow {
            position: absolute;
            top: 30px;
            right: 30px;
            transition: transform 0.3s ease;
            
            :deep(.ivu-icon) {
              color: #75deef;
            }
          }
        }
      }
      
      .system-status {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
        
        .status-card {
          background: rgba(7, 19, 50, 0.8);
          border: 1px solid #1a3c58;
          border-radius: 16px;
          padding: 25px;
          
          h4 {
            color: #75deef;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
          }
          
          .status-content {
            margin-bottom: 20px;
            
            .status-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 10px;
              
              .status-label {
                color: #999;
                font-size: 14px;
              }
              
              .status-value {
                color: #ff6b6b;
                font-size: 14px;
                font-weight: bold;
                
                &.status-success {
                  color: #4ecdc4;
                }
              }
            }
            
            .data-sources {
              margin-top: 15px;
              padding-top: 15px;
              border-top: 1px solid #1a3c58;
              
              .source-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;
                
                .source-label {
                  color: #999;
                  font-size: 12px;
                }
                
                .source-value {
                  color: #75deef;
                  font-size: 12px;
                  font-weight: bold;
                }
              }
            }
          }
          
          .sync-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            
            .sync-btn {
              display: flex;
              align-items: center;
              gap: 5px;
              padding: 8px 16px;
              background: rgba(117, 222, 239, 0.1);
              border: 1px solid #75deef;
              border-radius: 20px;
              color: #75deef;
              font-size: 12px;
              cursor: pointer;
              transition: all 0.3s ease;
              
              &:hover {
                background: rgba(117, 222, 239, 0.2);
                box-shadow: 0 0 10px rgba(117, 222, 239, 0.3);
              }
              
              &.primary {
                background: rgba(117, 222, 239, 0.2);
                border: 1px solid #75deef;
                color: #75deef;
                
                &:hover {
                  background: rgba(117, 222, 239, 0.3);
                  box-shadow: 0 0 15px rgba(117, 222, 239, 0.4);
                }
              }
              
              &:disabled {
                background: rgba(117, 222, 239, 0.1);
                border: 1px solid #75deef;
                color: #999;
                cursor: not-allowed;
                box-shadow: none;
              }
              
              :deep(.ivu-icon) {
                color: #75deef;
              }
            }
          }
          
          // 数据集概览卡片特殊样式
          &.dataset-overview-card {
            grid-column: span 2; // 占据两列宽度
            
            .dataset-stats {
              display: grid;
              grid-template-columns: 1fr 1fr;
              gap: 20px;
              margin-bottom: 15px;
              
              .stat-group {
                h5 {
                  color: #75deef;
                  font-size: 14px;
                  font-weight: bold;
                  margin-bottom: 10px;
                  text-align: center;
                  border-bottom: 1px solid #1a3c58;
                  padding-bottom: 5px;
                }
                
                .stat-item {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 8px;
                  
                  .stat-label {
                    color: #999;
                    font-size: 12px;
                  }
                  
                  .stat-value {
                    color: #4ecdc4;
                    font-size: 12px;
                    font-weight: bold;
                  }
                }
              }
            }
            
            .chart-container {
              border: 1px solid #1a3c58;
              border-radius: 8px;
              background: rgba(0, 0, 0, 0.2);
            }
          }
        }
      }
    }
  }
  
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    
    .modal-content {
      background: rgba(7, 19, 50, 0.95);
      border: 1px solid #1a3c58;
      border-radius: 12px;
      padding: 30px;
      width: 400px;
      text-align: center;
      
      h3 {
        color: #75deef;
        margin-bottom: 15px;
        font-size: 20px;
      }
      
      p {
        color: #999;
        margin-bottom: 25px;
        font-size: 16px;
      }
      
      .modal-buttons {
        display: flex;
        justify-content: center;
        gap: 15px;
        
        button {
          padding: 10px 25px;
          border: none;
          border-radius: 25px;
          cursor: pointer;
          font-size: 14px;
          transition: all 0.3s ease;
          
          &.cancel-btn {
            background: rgba(153, 153, 153, 0.2);
            color: #999;
            border: 1px solid #999;
            
            &:hover {
              background: rgba(153, 153, 153, 0.3);
            }
          }
          
          &.confirm-btn {
            background: rgba(255, 107, 107, 0.2);
            color: #ff6b6b;
            border: 1px solid #ff6b6b;
            
            &:hover {
              background: rgba(255, 107, 107, 0.3);
            }
          }
        }
      }
    }
  }
}

// 电流动画效果
@keyframes electric-grid {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: translate(50px, 50px);
    opacity: 0.3;
  }
}

@keyframes electric-pulse {
  0% {
    opacity: 0.1;
    transform: scale(1);
  }
  100% {
    opacity: 0.3;
    transform: scale(1.05);
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .home {
    .nav {
      .nav-left .system-title {
        font-size: 24px;
      }
    }
    
    .main-content {
      .dashboard-container {
        .cards-grid {
          grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
          gap: 20px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .home {
    .nav {
      height: 60px;
      padding: 0 15px;
      
      .nav-left .system-title {
        font-size: 18px;
      }
    }
    
    .main-content {
      margin-top: 60px;
      padding: 20px;
      
      .dashboard-container {
        .dashboard-title {
          font-size: 24px;
          margin-bottom: 30px;
        }
        
        .cards-grid {
          grid-template-columns: 1fr;
          gap: 15px;
        }
        
        .system-status {
          grid-template-columns: 1fr;
          gap: 20px;
        }
      }
    }
  }
}
</style>
